<template>
	<view class="mx-2">
		<view v-for="v of values" :key="v._id">
			<view class="mx-2 mt-5 flex">
				<c-image :src="v.avatarUrl"  class="avatar rounded" />
				<view class="flex flex-column ml-2">
					<text>{{v.username}}</text>
					<uni-dateformat class="font-sm secondary-color" :date="v.creat_date"
					format="yyyy-MM-dd" :threshold="[60000,3600000*24]"
					></uni-dateformat>
				</view>
			</view>
			
			<view class="my-2" @tap="$emit('toPost',v)">
				<text class="font-lg m-3">{{v.title}}</text>
				<view class="mx-1 flex flex-wrap">
					<c-image class="m-1 rounded" 
					:key="u.id"
					:style="resolveImgsSize(v.imgs.length)" v-for="u in v.imgs" :src="u.url" /> 
				</view>
				
			</view>
			
			<!-- 话题 -->
			<view class="mx-1">
				<text v-for="(u,i) of v.topics" :key="i" 
				class="p-1 px-2 mx-1 font-sm topic rounded"
				>{{u}}</text>
			</view>
			
			<view class="iconfont flex align-center justify-between my-3 mx-2">
				<view>
					<c-temp v-slot="op">
						<view @tap="praise(op,v)" :class="activeColor(v.praiseStatus)">
							<text class="icon-dianzan action-icon"></text>
							<text v-if="v.praiseNum" class="ml-2">{{v.praiseNum}}</text>
						</view>
					</c-temp>
					<!-- <view>
						<text class="icon-pinglun"></text>
						<text>0</text>
					</view> -->
				</view>
				<view>
					<view>
						<text class="icon-pinglun action-icon"></text>
						<text class="ml-2">0</text>
					</view>
				</view>
				<view>
					
					<c-temp v-slot="op">
						<view @tap="love(op,v)" :class="activeColor(v.loveStatus)">
							<text class="icon-like1 action-icon"></text>
							<text v-if="v.loveNum" class="ml-2">{{v.loveNum}}</text>
						</view>
					</c-temp>
					
				<!-- 	<view>
						<text class="icon-like1 action-icon"></text>
						<text class="ml-2">0</text>
					</view> -->
				</view>
			</view>
			
			<!-- 分割线 -->
			<view class="bg-hover-light my-2"
			style="height: 10rpx; opacity: .4;"
			>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props: {
			values: {
				type: Array,
				default: () => []
			}
		},

		methods:{
			resolveImgsSize(len){
				return {
					width:`${len<=2?345:220}rpx`,
					height:`${len<=2?330:220}rpx`
				}
			},
			praise(op,v){
					const unLoading =  op.useLoading()
					
					const fail = msg=>this.$U.notice(msg)
					const success = ()=>{
						if (v.praiseStatus){
							v.praiseNum--
							v.praiseStatus = false 
						}else{
							v.praiseNum++
							v.praiseStatus = true 
						}
					}
					
					const complete = () => unLoading()
					this.$emit('praise',{
						postID:v._id,
						praiseStatus:v.praiseStatus,
						fail,
						success,
						complete
					})
					
				// this.loading = true
				// setTimeout(()=>{
				// 	v.praiseNum++
				// 	v.praiseStatus = true
				// 	unLoading()
				// },3000)
			},
			activeColor(praiseStatus){
				return praiseStatus && 'main-color'
			},
			love(op,v){
					const unLoading =  op.useLoading()
					
					const fail = msg=>this.$U.notice(msg)
					const success = ()=>{
						if (v.loveStatus){
							v.loveNum--
							v.loveStatus = false 
						}else{
							v.loveNum++
							v.loveStatus = true 
						}
					}
					
					const complete = () => unLoading()
					this.$emit('love',{
						postID:v._id,
						loveStatus:v.loveStatus,
						fail,
						success,
						complete
					})
			},
		}
	}
</script>

<style scoped>
	.avatar {
		width: 90rpx;
		height: 90rpx;
	}
	.topic{
		color: #595959;
		background-color: #f5f5f5;
	}
	.action-icon{
		font-size: 45rpx;
	}
	
</style>